<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../layui-v2.5.7/layui-v2.5.7/layui/css/layui.css">
  <link rel="stylesheet" href="../css/reward.css">

</head>
<body>
<div class="masonry" id="masonry"></div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
</body>
<script src="../js/jquery.min.js"></script>
<script src="../layui-v2.5.7/layui-v2.5.7/layui/layui.js"></script>
<script type="text/javascript">
  window.onload = function(){
    let html = ""
    let masonry = $("#masonry")
    $.ajax({
      type: "GET",
      url: "https://www.iloveyxr.top:8081/award/all",
      success: res => {
        console.log(res);
        let arr = res.data;
        for(let i = 0;i < arr.length;i++){
          html += '<div class="item">'
          html += '<img src="' + arr[i].url + '">'
          html += '</div>'
        }
        masonry.html(html);
      }
    });
  }
</script>
<script>
  layui.use('table', function(){
    var table = layui.table;
    var tableIns = table.render({
      elem: '#test'
      ,url:'https://www.iloveyxr.top:8081/award/all'
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,toolbar: "#toolbarDemo"
      ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
        title: '提示'
        ,layEvent: 'LAYTABLE_TIPS'
        ,icon: 'layui-icon-tips'
      }]
      ,parseData: function (res){
        var result;
        if (this.page.curr) {
          result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
        }
        else {
          result = res.data.slice(0, this.limit);
        }
        return{
          "code": 0,
          "msg": "ok",
          "count": res.l,
          "data": result,
        }
      }
      ,cols: [[
        {type:"checkbox"}
        ,{field:'id', width:80, title: 'ID', sort: true}
        ,{field:'name', width:300, title: '获奖名称'}
        ,{field:'time', width:150, title: '时间', sort: true}
        ,{field:'team',width: 50,title: "团队编号",sort: true}
        ,{field:'url',width: 250,title:"图片链接"}
        ,{field:'class', width:80, title: '组别'}
      ]]
      ,loading: true
      ,page: true
      ,limits: [10,15,20,120]
      ,limit: 10
      ,id: "testReload"
    });
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'getCheckData':
          var data = checkStatus.data;
          console.log(data);
          layer.alert(JSON.stringify(data));
          break;
        case 'getCheckLength':
          var data = checkStatus.data;
          layer.msg('选中了：'+ data.length + ' 个');
          break;
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选': '未全选');
          break;

              //自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          layer.alert('这是工具栏右侧自定义的一个图标按钮');
          break;
      };
    });
  });
</script>
</html>